<!--
*@Author: QWP
*@Description: 危化预警  —— 警报信息
*@Date 2024-10-25 13:58
-->
<template>
  <a-layout class="f-h-100 s-bg-white" >
    <u-table-header v-if="!orgId">
      <u-form
        :model="searchF.model"
        :gutter="16"
        :elements="searchEl"
        class="f-w-auto"
        :isSearch="true"
        @formChange="getSearch(1)">
        <template #warnStartDateBegin="{ componentProps }">
          <a-row class="f-w-100" style="align-items: center;">
            <a-col flex="1">
              <a-date-picker v-model:value="searchF.model.warnStartDateBegin" 
                v-bind="componentProps"
                :disabled-date="(current) => disabledDateC(current, searchF.model.warnStartDateEnd, 'after')"
                @change="getSearch(1)">
              </a-date-picker>
            </a-col>
            <span class="f-padding-rl5">至</span>
            <a-col flex="1">
              <a-form-item-rest>
                <a-date-picker v-model:value="searchF.model.warnStartDateEnd" 
                  v-bind="componentProps"
                  :disabled-date="(current) => disabledDateC(current, searchF.model.warnStartDateBegin, 'before')"
                  @change="getSearch(1)">
                </a-date-picker>
              </a-form-item-rest>
            </a-col>
          </a-row>
        </template>
        <template #warnEndDateBegin="{ componentProps }">
          <a-row class="f-w-100" style="align-items: center;">
            <a-col flex="1">
              <a-date-picker v-model:value="searchF.model.warnEndDateBegin" 
                v-bind="componentProps"
                :disabled-date="(current) => disabledDateC(current, searchF.model.warnEndDateEnd, 'after')"
                @change="getSearch(1)">
              </a-date-picker>
            </a-col>
            <span class="f-padding-rl5">至</span>
            <a-col flex="1">
              <a-form-item-rest>
                <a-date-picker v-model:value="searchF.model.warnEndDateEnd" 
                  v-bind="componentProps"
                  :disabled-date="(current) => disabledDateC(current, searchF.model.warnEndDateBegin, 'before')"
                  @change="getSearch(1)">
                </a-date-picker>
              </a-form-item-rest>
            </a-col>
          </a-row>
        </template>
        <a-col>
          <a-space>
            <u-icon-button @click="getSearch(1)">查询</u-icon-button>
          </a-space>
        </a-col>
      </u-form>
    </u-table-header>
    <u-table-content>
      <u-table
        :columns="columns"
        :data="tabData"
        v-model:pagination="pagenation"
        :loading="loading"
        :rowSelection="null"
        @onDblclick="(record) => {
          if((record['triskCauseItemList'] || []).length != 0) {
            currentRow = record;
            showDetial = true
          }
        }"
        @change="getSearch">
      </u-table>
    </u-table-content>
  </a-layout>

  <!-- 风险原因详情 -->
  <Edit v-model:open="showDetial"
    :current="currentRow"
    wrap-class-name="full-modal"
    @close="currentRow = {}"/>
</template>

<script lang="ts" setup>
import { ref, reactive, computed, onMounted, h, watch } from "vue";
import { _IFormEl } from "@/components/common/form/interface";
import { FormItemProps, TableColumnProps,  } from "ant-design-vue";
import { _IExtra } from '@/src/components/common/form/interface';
import dayjs from "dayjs";
import utc from "dayjs/plugin/utc";
import { useTableScroll } from '@/hooks/useTable'
import { formatWarnLevel } from '@/views/oa/warning/sumWarning/utils.ts'
import Edit from './Edit.vue'
import * as endangerWarningApi from '@/service/emergency/endanger'

dayjs.extend(utc);

// 企业查看风险详情
const props = defineProps<{
  orgId?: string
}>()

let pagenation = reactive({
  total: 0,
  current: 1,
  pageSize: 50,
  showTotal: total => `共 ${total} 条`
})
const searchF = reactive({
  model: {
    keywords: null
  },
});
const formItemProps: FormItemProps & _IExtra = {
  labelWidth: '72px',
  wrapperCol: { span: 24 },
};
const searchEl: Array<_IFormEl> = [
  { label: "报警开始时间", key: "warnStartDateBegin", element: "slot", formItemProps: { ...formItemProps, labelWidth: '100px' },
    componentProps: {
      format: 'YYYY-MM-DD',
      valueFormat: 'YYYY-MM-DDTHH:mm:ss.sssZ',
    }
  },
  { label: "报警结束时间", key: "warnEndDateBegin", element: "slot", formItemProps: { ...formItemProps, labelWidth: '100px' },},
  { label: "模糊查询", key: "keywords", element: "input", col: { span: 4 }, formItemProps: formItemProps,
    componentProps: { placeholder: '请输入企业名称' }
  },
];

// 查看详情
const showDetial = ref<boolean>(false);
const currentRow = ref<any>({})

// 列表
const loading = ref<boolean>(false)
const tabSelData = ref<any[]>([])
const tabData = ref<any[]>([]);
let columns: Array<TableColumnProps> = reactive([
  { dataIndex: "ROW_ID", title: "序号", width: 50, align: 'center',
    customRender: ({ index }) => index += 1
  },
  ...(props.orgId ? [] : [
    { dataIndex: "orgName", title: "企业名称", width: 180,
      customRender: ({ text, record }) => {
        const { triskCauseItemList } = record
        return (triskCauseItemList || []).length == 0 ? text : h('span', { 
          style: {color: '#1890ff', cursor: 'pointer'},
          onClick: () => {
            showDetial.value = true;
            currentRow.value = record
          }
        }, text)
      }
    }
  ]),
  { dataIndex: "warnStartDate", title: "报警开始时间", width: 110, align: 'center',
    customRender: ({ text }) => text ? dayjs.utc(text).format('YYYY-MM-DD HH:mm:ss') : ''
  },
  { dataIndex: "warnEndDate", title: "报警结束时间", width: 110, align: 'center',
    customRender: ({ text }) => text ? dayjs.utc(text).format('YYYY-MM-DD HH:mm:ss') : ''
  },
  { dataIndex: "warnLevel", title: "报警等级", width: 110, align: 'center',
    customRender: ({text}) => {
      return formatWarnLevel(text, '报警')
    }
  },
  { dataIndex: "warnType", title: "报警类别 ", width: 150 },
  { dataIndex: "warnStatus", title: "处置状态 ", width: 150 },
  { dataIndex: "content", title: "报警内容 ", width: 400 },
]);

onMounted(() => {
  getSearch()
})

// 列表查询
const getSearch = async(current?: number) => {
  loading.value = true;
  try {
    if(current == 1) {
      pagenation.current = 1;
    }
    searchF.current = pagenation.current;
    searchF.size = pagenation.pageSize;
    let res = null;
    if(props.orgId) {
      searchF.model.orgId = props.orgId
      searchF.model.type = 1
      res = await endangerWarningApi.warningFirmPage(searchF)
    }
    else {
      res = await endangerWarningApi.alarmPage(searchF)
    }
    if(res.code == 0) {
      tabData.value = res.data.records || []
      pagenation.total = res.data.total
    }
  } catch (error) {}
  loading.value = false;
}

const disabledDateC = (current, data, type) => {
  if(!current || !data) {
    return false
  }
  return type == 'before' ? current < dayjs(data).endOf('day').subtract(1, 'day') : current > dayjs(data).endOf('day')
}

watch(() => props.orgId, (nval) => {
  if(nval) {
    getSearch()
  }
}, { immediate: true })

</script>

<style lang="scss" scoped>
.icons-list :deep(.anticon) {
  margin-right: 6px;
  font-size: 24px;
}
</style>
